<template>
  <div>
    <div style="margin: 20px;">
      <el-form :inline="true" :model="queryParam" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="queryParam.userName" placeholder="请输入姓名" clearable />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="queryParam.phone" placeholder="请输入手机号" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
        </el-form-item>
      </el-form>

      <div style="margin-top: 20px;">
        <el-table :data="tableData" border stripe style="width: 100%">
          <el-table-column prop="id" label="ID" />
          <el-table-column prop="userName" label="姓名" />
          <el-table-column prop="phone" label="手机号" />
          <el-table-column prop="unitName" label="单位名称" min-width="120" />
          <el-table-column prop="unitPosition" label="单位职务" />
          <el-table-column prop="status" label="身份">
            <template #default="{ row }">
              <el-tag :type="row.status === 1 ? 'success' : 'danger'">
                {{ row.status === 1 ? '会员单位成员' : '游客' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="avatar" label="头像" width="100">
            <template #default="{ row }">
              <el-image
                v-if="row.avatar"
                :src="imgSrc(row.avatar)"
                fit="cover"
                style="width: 50px; height: 50px; cursor: pointer;"
                @click="previewAvatar(row.avatar)"
              />
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="{ row }">
              <el-button link type="primary" size="small" @click="edit(row)">编辑</el-button>
              <el-button link type="primary" size="small" @click="del(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px;">
          <el-pagination
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            layout="total,prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <bs-wx-user-form ref="wxUserForm" @refresh="refresh" />
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { ElMessage, ElMessageBox } from "element-plus";
import {instance} from "../../request.js";
import BsWxUserForm from "../../components/BsWxUserForm.vue";

let wxUserForm = ref()

// 分页相关
const pageNo = ref(1)
const pageSize = ref(5)
const total = ref(0)
function handleCurrentChange() {
  getData()
}

// 查询条件
const queryParam = ref({
  userName: '',
  phone: '',
})
const tableData = ref([])

// 分页获取表格数据
async function getData(query = {}) {
  try {
    let result = await instance.get('/bsWxUser/list', {
      params: {
        pageNum: pageNo.value,
        pageSize: pageSize.value,
        ...queryParam.value,
        ...query,
      },
    })
    let { code, data, msg } = result.data
    if (code == 200) {
      tableData.value = data.list
      total.value = data.total
    } else {
      ElMessage({ message: msg, type: 'warning', })
    }
  } catch (e) {
    console.log(e)
    ElMessage({ message: '获取表格数据失败', type: 'warning', })
  }
}

// 查询方法
function query() {
  getData(queryParam.value)
}

// 删除方法
async function del(row: any) {
  try {
    await ElMessageBox.confirm('此操作将永久删除该用户信息，是否继续？', { title: '提示', })
    try {
      let result = await instance.delete(`/bsWxUser/${row.id}`)
      let { code, msg } = result.data
      if (code == 200) {
        ElMessage({ message: '删除成功', type: 'success', })
        getData()
      } else {
        ElMessage({ message: msg, type: 'warning', })
      }
    } catch (e) {
      console.log(e)
      ElMessage({ message: '删除失败', type: 'warning', })
    }
  } catch (e) {
  }
}

// 编辑事件
function edit(row: any) {
  wxUserForm.value?.edit(row)
}

// 刷新方法
function refresh() {
  pageNo.value = 1
  getData()
}

let imgSrc = computed(() => {
  return (v:string)=>{
    //判断是否http/https开头
    if (v.startsWith('http://') || v.startsWith('https://')) {
      return v;
    }
    return v ? 'http://localhost:8080/rbac/common/download/' + v : '';
  }
});

// 弹窗预览头像
function previewAvatar(avatarUrl: string) {
  avatarUrl = (avatarUrl.startsWith('http://') || avatarUrl.startsWith('https://')) ? avatarUrl : 'http://localhost:8080/rbac/common/download/' + avatarUrl;
  ElMessageBox.alert(
    `<img src="${avatarUrl}" style="max-width: 100%; max-height: 400px;" />`,
    '头像预览',
    {
      dangerouslyUseHTMLString: true,
      showConfirmButton: false,
      showCancelButton: true,
      cancelButtonText: '关闭',
    }
  );
}

// 请求数据
getData()
</script>

<style lang="scss" scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
